<template>
  <div v-if="isShowUserCenter === 1 && tabActiveKey === 20001"></div>
  <div v-else>
    <div
      class="diy-phone_top rel"
      :style="{
        backgroundColor: page.style.titleBackgroundColor,
        color: page.style.titleTextColor
      }"
    >
      <div
        class="abs"
        style="top: 0"
        @click="goUcenter(tabActiveKey !== 20001 ? 20001 : tabBar.list[0].key)"
        v-if="isShowUserCenter !== 20001"
      >
        <div class="back-user" v-if="isShowUserCenter !== 1">
          <div class="iconshouye iconfont" v-if="tabActiveKey === 20001"></div>
          <img
            class="back-user_avatar"
            src="https://lbqnyv2.migugu.com/defaultAvatar.png"
            v-if="tabActiveKey !== 20001"
          />
          <div class="back-user_text">
            {{ tabActiveKey === 20001 ? '回到首页' : '个人中心' }}
          </div>
        </div>
      </div>
      <div class="nav-title" style="position: absolute">
        {{ page.params.title }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'navbar',
  props: {
    page: Object,
    tabActiveKey: Number,
    tabBar: Object,
    isShowUserCenter: Number
  },
  methods: {
    goUcenter (key) {
      this.tabBar.list.findIndex((item, index) => {
        if (item.key === key) {
          let isShow = item.is_show
          this.$emit('goUcenter', { key, isShow })
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.diy-phone_top {
  width: 100%;
  height: 66px;
  text-align: center;
  background: url(../../assets/nav-bg.png) center center / contain no-repeat
    rgb(255, 255, 255);
  position: relative;
}

.back-user {
  width: 80px;
  height: 28px;
  border-radius: 28px;
  margin-top: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #eeeeee;
  margin-left: 16px;
}

.back-user_avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f4f6f8;
}

.back-user_text {
  font-size: 8px;
  line-height: 28px;
  margin-left: 2px;
}
.nav-title {
  width: 100px;
  left: 50%;
  margin-left: -50px;
  line-height: 44px;
  font-size: 16px;
  top: 15px;
}
</style>
